<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '../../store/auth'
import { updateAdmin } from '../../api/admin'
import { ElMessage } from 'element-plus'

const auth = useAuthStore()
const form = ref({ adminId: auth.currentId, name: '', phone: '' })
const loading = ref(false)

const prefill = () => {
  const u = auth.user || {}
  form.value = {
    adminId: auth.currentId,
    name: u.name || '',
    phone: u.phone || ''
  }
}

const submit = async () => {
  loading.value = true
  try {
    await updateAdmin(auth.currentId, form.value)
    ElMessage.success('更新成功')
  } finally { loading.value = false }
}

onMounted(prefill)
</script>

<template>
  <el-card class="mb-2">
    <h3>我的信息</h3>
    <el-descriptions :column="2" border class="mt-1" style="max-width:800px">
      <el-descriptions-item label="管理员ID">{{ auth.user?.adminId ?? '-' }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ auth.user?.username ?? '-' }}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{ auth.user?.name ?? '-' }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ auth.user?.phone ?? '-' }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ auth.user?.createTime ?? '-' }}</el-descriptions-item>
    </el-descriptions>
  </el-card>

  <el-card>
    <h3>编辑信息</h3>
    <el-form :model="form" label-width="120px" style="max-width:600px">
      <el-form-item label="姓名"><el-input v-model="form.name" placeholder="请输入姓名" /></el-form-item>
      <el-form-item label="手机号"><el-input v-model="form.phone" placeholder="请输入手机号" /></el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.mb-2{ margin-bottom:12px; }
.mt-1{ margin-top:8px; }
</style>